<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 
      v-bind:属性名="属性值(从data中获取)"
      v-bind可以简写成:
      1.动态style属性:可以和style属性一起使用
      1.1值是(样式组成的)对象,key是属性名,值是属性值(从data中获取)
      1.2值是数组,值是属性组成的对象


      2.动态class属性:可以和class一起用
      2.1.值是一个表达式,isactive?'active':'noactive',用法:类只有一个,不确定是哪个
      2.2值是一个对象,key是类名,值是布尔值,用法:类有多个,不确定有没有
      2.3值是一个数组,值是类名组成的字符串,用法:类的个数不确定,可以对类进行增删改

     -->
  </div>
  <script>

    
    Vue.config.productionTip = false
    const vm = new Vue({
      el:"#app",
      data(){
        return {
          msg:"hello vue",
        
        }
      }
    })
    </script>
</body>
</html>